import { Delete28Filled, IosArrowRtl24Regular } from "@vicons/fluent";
import { NButton, NCard, NIcon } from "naive-ui";
import { flowNodeTheme } from "@/hooks/useWflow";
import { DesignNode } from "@/types";
import CAddFlowNodeBtn from "./CAddFlowNodeBtn";
import { PropType } from "vue";
import "./style.css";
interface Props {
  nodeItem: DesignNode;
}
export default defineComponent({
  name: "ConditionNode",
  props: {
    nodeItem: {
      type: Object as PropType<Props["nodeItem"]>,
    },
  },
  setup(props) {
    let { nodeItem } = props;
    return () => (
      <div class="condition-outer relative ml-2 flex">
        <div class="condition-body text-center relative">
          <div class=" absolute w-20 top-0 left-0"></div>
          <NButton
            round
            strong
            type="primary"
            style={{
              margin: "auto",
              position: "absolute",
              width: "100px",
              zIndex: "10",
            }}
            class="top-0 bottom-0 left-0"
          >
            {nodeItem?.name}
          </NButton>
          <div class="node-grid">
            {nodeItem?.children &&
              nodeItem?.children.map((item) => {
                return (
                  <div class="flex node-grid-item relative">
                    {item.map((it,index) => {
                      return (
                        <div
                          key={it?.id}
                          class="node-wrap border-x-inherit cursor-pointer relative flex"
                        >
                          <NCard
                            contentStyle={{
                              padding: 0,
                              width:'207px'
                            }}
                          >
                            <div class="flow-node p-3 w-52">
                              <div
                                class="flow-node-cd absolute right-0 z-10"
                                style={{
                                  top: "-26px",
                                }}
                              >
                                <NButton size="tiny" secondary type="primary">
                                  <NIcon size={15} component={Delete28Filled} />
                                </NButton>
                              </div>
                              <div class="head box-border text-base font-bold text-left flex items-center">
                                <NIcon
                                  size={25}
                                  color={
                                    flowNodeTheme[nodeItem?.type as string][1]
                                  }
                                  component={
                                    flowNodeTheme[nodeItem?.type as string][0]
                                  }
                                />
                                <span class="ml-1">{it?.name}</span>
                              </div>
                              <div class="center box-border mt-2">
                                <NButton
                                  strong
                                  secondary
                                  block
                                  type="tertiary"
                                  iconPlacement="right"
                                  style={{
                                    justifyContent: "space-between",
                                  }}
                                >
                                  {{
                                    icon: () => {
                                      return (
                                        <NIcon
                                          component={IosArrowRtl24Regular}
                                        />
                                      );
                                    },
                                    default: () => "请选择",
                                  }}
                                </NButton>
                              </div>
                            </div>
                          </NCard>
                          <CAddFlowNodeBtn nodeItem={it} isArrow={(index + 1 < item.length) ? true : false} />
                        </div>
                      );
                    })}
                  </div>
                );
              })}
          </div>
        </div>
        <CAddFlowNodeBtn nodeItem={nodeItem} />
      </div>
    );
  },
});
